<template>
  <el-form ref="form" :model="deviceDetailInfoForm" label-width="130px">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="设备ID：">{{ deviceDetailInfoForm.deviceId }}</el-form-item>
        <el-form-item label="设备部署名称：">{{ deviceDetailInfoForm.deploymentName }}</el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="设备型号：">{{ deviceDetailInfoForm.deviceName }}</el-form-item>
        <el-form-item label="设备序列号：">{{ deviceDetailInfoForm.deviceSn }}</el-form-item>
        <el-form-item label="设备部署区域：">{{ deviceDetailInfoForm.ancestorsName }}</el-form-item>
        <el-form-item label="设备所属分组：">{{ deviceDetailInfoForm.groupName }}</el-form-item>
        <el-form-item label="默认网点：">{{ deviceDetailInfoForm.branchName }}</el-form-item>
        <el-form-item label="设备状态：">
          <dict-tag
            :options="dict.type.device_status"
            :value="deviceDetailInfoForm.deviceStatus"
            @click.native="navToDeviceStatusLog(deviceDetailInfoForm.deviceStatus,deviceDetailInfoForm.deviceId, true)"
            :class="[{pointer:hasFaultPermission || hasStatusPermission}]"
          />
        </el-form-item>
        <el-form-item label="运维负责人：">
          <div @click="navToOperation( deviceDetailInfoForm.operationUserName)"
               :class="[{pointer: hasOperationUserPermission}]">
            {{ deviceDetailInfoForm.operationUserName }}
          </div>
        </el-form-item>
      </el-col>


      <el-col :span="12">
        <el-form-item label="设备生产日期：">{{ deviceDetailInfoForm.productionDate }}</el-form-item>
        <el-form-item label="设备编码：">{{ deviceDetailInfoForm.deviceCode }}</el-form-item>
        <!-- <el-form-item label="粤自助设备编号：">{{ deviceDetailInfoForm.yzzDeviceCode }}</el-form-item>
         <el-form-item label="粤自助注册码：">{{ deviceDetailInfoForm.yzzSerialNumber }}</el-form-item>-->
        <el-form-item label="设备详细地址：">{{ deviceDetailInfoForm.deploymentAddress }}</el-form-item>
        <el-form-item label="设备经纬度：">{{ deviceDetailInfoForm.deploymentCoordinate }}</el-form-item>
        <el-form-item label="设备IP地址：">{{ deviceDetailInfoForm.ipAddress }}</el-form-item>
        <el-form-item label="创建时间：">{{ deviceDetailInfoForm.createTime }}</el-form-item>
        <el-form-item label="创建人：">{{ deviceDetailInfoForm.createBy }}</el-form-item>
      </el-col>

    </el-row>
  </el-form>
</template>

<script>
import {checkPermi} from "@/utils/permission";

export default {
  name: "deviceDetailInfo",
  dicts: ['device_status'],
  props: {
    // 设备详细信息数据
    deviceDetailInfoForm: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  computed: {
    // 网点树形数据
    branchDataOptions() {
      return this.$store.state.device.branchDataOptions || []
    },
    // 是否有查看运维人员信息页面权限
    hasOperationUserPermission() {
      return checkPermi(['device:operationUser:list']);
    },
    // 是否有查看故障日志页面权限
    hasFaultPermission() {
      return checkPermi(['monitor:faultlog:list']);
    },
    // 是否有查看故障日志页面权限
    hasStatusPermission() {
      return checkPermi(['monitor:status:list']);
    },
  },
  methods: {
    // 跳转到运维人员页面
    navToOperation(operationUserName) {
      if (!this.hasOperationUserPermission) return;
      this.$router.push({
        name: 'Operation',
        query: {operationUserName}
      })
    },
    // 跳转到日志页面
    navToDeviceStatusLog(deviceStatus, deviceId) {
      if (deviceStatus == 2) {
        if (!this.hasStatusPermission) return;
        //  如果设备离线,跳转到心跳日志页面，携带设备ID
        this.$router.push({name: 'DeviceStatusLog', query: {deviceId}})
      } else if (deviceStatus == 3) {
        if (!this.hasFaultPermission) return;
        // 如果设备异常,跳转到故障日志页面，携带设备ID
        this.$router.push({name: 'FaultLog', query: {deviceId}})
      }
    },
  }

}
</script>

<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}
</style>
